<!--
/**
 * 存放位置 列表页 JS 脚本
 * @author 金杰 , maillank@qq.com
 * @since 2021-10-12 12:47:14
 */
 -->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8"/>
    <title th:text="${lang.translate('数据库备份统计面板')}">数据库备份统计面板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" th:href="'/assets/libs/layui/css/layui.css?'+${cacheKey}"/>
    <link rel="stylesheet" href="/assets/css/admin.css" th:href="'/assets/css/admin.css?'+${cacheKey}"/>
    <link rel="stylesheet" href="/assets/libs/toast/css/toast.css" type="text/css" th:href="'/assets/libs/toast/css/toast.css?'+${cacheKey}">
    <link rel="stylesheet" href="/assets/css/foxnic-web.css" th:href="'/assets/css/foxnic-web.css?'+${cacheKey}">
    <link href="/assets/libs/font-awesome-4.7.0/css/font-awesome.min.css" th:href="@{/assets/libs/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet"/>
    <script th:inline="javascript">var foxnic_cachekey=[[${cacheKey}]];</script>
    <link th:if(theme.ico!="null") rel="shortcut icon" th:href="${theme.ico}" type="image/vnd.microsoft.icon">
    <link th:if(theme.ico!="null") rel="icon" th:href="${theme.ico}" type="image/vnd.microsoft.icon">
    <link th:each="css:${theme.css}" rel="stylesheet" th:href="${css}+'?'+${cacheKey}">


    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .icon {margin-right:10px;color:#1aa094;}
        .icon-cray {color:#ffb800!important;}
        .icon-blue {color:#1e9fff!important;}
        .icon-tip {color:#ff5722!important;}
        .layuimini-qiuck-module {text-align:center;margin-top: 10px}
        .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
        .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
        .welcome-module {width:100%;height:210px;}
        .panel {background-color:white!important;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:10px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
        .layui-bg-number {background-color:#F8F8F8;}
        .layuimini-notice:hover {background:#f6f6f6;}
        .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
        .layuimini-notice-title,.layuimini-notice-label {
            padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
        .layuimini-notice-title {line-height:28px;font-size:14px;}
        .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}



        /*table {*/
        /*    border-collapse: collapse;*/
        /*    border-spacing: 0;*/
        /*}*/

        /*td,th {*/
        /*    padding: 0;*/
        /*}*/

        /*.pure-table {*/
        /*    border-collapse: collapse;*/
        /*    border-spacing: 0;*/
        /*    empty-cells: show;*/
        /*    border: 1px solid #cbcbcb;*/
        /*}*/

        /*.pure-table caption {*/
        /*    color: #000;*/
        /*    font: italic 85%/1 arial,sans-serif;*/
        /*    padding: 1em 0;*/

        /*    text-align: center;*/
        /*}*/

        /*.pure-table td,.pure-table th {*/
        /*    border-left: 1px solid #cbcbcb;*/
        /*    border-width: 0 0 0 1px;*/
        /*    font-size: inherit;*/
        /*    margin: 0;*/
        /*    overflow: visible;*/
        /*    padding: .5em 1em;*/
        /*}*/

        /*.pure-table thead {*/
        /*    background-color: #e0e0e0;*/
        /*    color: #000;*/
        /*    text-align: left;*/
        /*    vertical-align: bottom;*/
        /*}*/

        /*.pure-table td {*/
        /*    background-color: transparent;*/
        /*}*/

        /*.pure-table-odd td {*/
        /*    background-color: #f2f2f2;*/
        /*}*/



        .hh{
            height: 120px;
        }
        .ht{
            margin-top:10px;
        }
        .hm{
            margin-top:7px;
            margin-bottom:5px;
        }

    </style>
</head>

<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space10">

        <div class="layui-row layui-col-space10">

            <div class="layui-col-md2">
                <div class="panel layui-bg-number banner hh" >
                    <div class="panel-body">
                        <div class="panel-title ht">
                            <span class="label pull-right layui-bg-blue">实时</span>
                            <h5>备份任务总数</h5>
                        </div>
                        <div class="panel-content">
                            <h1 id="backup_count" class="no-margins hm">0</h1>
                            <small>当前启用需要备份的数据库备份数</small>
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-col-md2">
                <div class="panel layui-bg-number hh">
                    <div class="panel-body">
                        <div class="panel-title ht">
                            <span class="label pull-right layui-bg-blue">实时</span>
                            <h5>备份策略配置总数</h5>
                        </div>
                        <div class="panel-content">
                            <h1 id="backup_task_setting_none_count" class="no-margins hm">0</h1>
                            <small>当前备份已启用但未配置备份策略</small>
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-col-md2">
                <div class="panel layui-bg-number hh">
                    <div class="panel-body">
                        <div class="panel-title ht">
                            <span class="label pull-right layui-bg-blue">实时</span>
                            <h5>备份成功总数</h5>
                        </div>
                        <div class="panel-content">
                            <h1 id="backupSuccessCount" class="no-margins hm">0</h1>
                            <small>今日备份成功总数</small>
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-col-md2">
                <div class="panel layui-bg-number hh">
                    <div class="panel-body">
                        <div class="panel-title ht">
                            <span class="label pull-right layui-bg-blue">实时</span>
                            <h5>备份失败总数</h5>
                        </div>
                        <div class="panel-content">
                            <h1 id="backupFailedCount" class="no-margins hm">0</h1>
                            <small>今日备份失败总数</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md2">
                <div class="panel layui-bg-number hh">
                    <div class="panel-body">
                        <div class="panel-title ht">
                            <span class="label pull-right layui-bg-blue">实时</span>
                            <h5>备份缺失总数</h5>
                        </div>
                        <div class="panel-content">
                            <h1 id="backupNoneCount" class="no-margins hm">0</h1>
                            <small>今日备份缺失总数</small>
                        </div>
                    </div>
                </div>
            </div>

<!--            <div class="layui-col-md2">-->
<!--                <div class="panel layui-bg-number hh">-->
<!--                    <div class="panel-body">-->
<!--                        <div class="panel-title ht">-->
<!--                            <span class="label pull-right layui-bg-blue">实时</span>-->
<!--                            <h5>今日备份大小</h5>-->
<!--                        </div>-->
<!--                        <div class="panel-content">-->
<!--                            <h1 id="backupDataSize" class="no-margins hm">0</h1>-->
<!--                            <small>今日备份总大小</small>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->



        </div>
    </div>
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
</div>

<style>
    /*table{*/
    /*}*/
    /*table, td, th*/
    /*{*/
    /*    overflow-y: scroll;*/
    /*    border:1px solid #7CD8A5;*/
    /*}*/
    /*th*/
    /*{*/
    /*    background-color:#7E96FE;*/
    /*    color:white;*/
    /*}*/
    /*.custTable{*/
    /*    overflow:scroll;*/
    /*    width:100%;*/
    /*    height:300px;*/
    /*    overflow-y: scroll;*/
    /*    text-align: center;*/

    /*}*/
    /*.custTable tbody{*/
    /*    overflow-y: scroll;*/
    /*}*/
    /*.custTable,tr,td{*/
    /*    height: 20px!important;*/
    /*}*/

</style>


<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    数据库每日备份次数统计
                </div>
                <div class="layui-card-body">
                    <div id="backup_count_trend" style="width:100%;height:300px"></div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    数据库每日失败备份次数统计
                </div>
                <div class="layui-card-body">
                    <div id="backup_failed_count_trend" style="width:100%;height:300px"></div>
                </div>
            </div>
        </div>

    </div>
</div>




<div class="layui-fluid" style="display: none">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    数据库任务状态统计
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space10">
                        <div id="backup_result_dist_show" style="width:100%;height:300px"></div>
                    </div>
                </div>
            </div>
        </div>


        <div class="layui-col-md6" >
            <div class="layui-card">
                <div class="layui-card-header">
                    数据库任务状态占比
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space10">
                        <div id="backup_result_dist_pie"  style="height:300px"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>



<div class="layui-fluid" style="display: none">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    数据库备份时长TOP
                </div>
                <div class="layui-card-body">
                    <div id="db_backup_time_top" style="width:100%;height:300px"></div>
                </div>
            </div>
        </div>
    </div>
</div>



<!--<div class="layui-fluid">-->
<!--    <div class="layui-row layui-col-space10">-->
<!--        <div class="layui-col-md12">-->
<!--            <div class="layui-card">-->
<!--                <div class="layui-card-header">-->
<!--                 -->
<!--                </div>-->
<!--                <div class="layui-card-body">-->
<!--                    <div id="backup_failed_count_trend" style="width:100%;height:300px"></div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->




</div>
<div class="layui-card">

    <div class="layui-card-body" style="">

        <div id="table-area" style="margin-top: 0px ">
            <table class="layui-table" id="data-table" lay-filter="data-table"></table>
        </div>

    </div>
</div>

<script>

</script>





<!--<script type="text/javascript" src="/module/global.js" th:src="'/module/global.js?'+${cacheKey}"></script>-->
<!--<script type="text/javascript" src="/assets/libs/jquery-3.2.1.min.js" th:src="'/assets/libs/jquery-3.2.1.min.js?'+${cacheKey}"></script>-->
<!--<script type="text/javascript" src="/assets/libs/pandyle.min.js" th:src="'/assets/libs/pandyle.min.js?'+${cacheKey}"></script>-->
<!--<script type="text/javascript" src="/assets/libs/layui/layui.js" th:src="'/assets/libs/layui/layui.js?'+${cacheKey}"></script>-->
<!--<script type="text/javascript" src="/assets/libs/toast/js/toast.js" th:src="'/assets/libs/toast/js/toast.js?'+${cacheKey}"></script>-->
<!--<script type="text/javascript" src="/extmodule/echarts/echarts.js" th:src="'/extmodule/echarts/echarts.js?'+${cacheKey}" ></script>-->


<script type="text/javascript" src="/module/global.js" th:src="'/module/global.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/jquery-3.2.1.min.js" th:src="'/assets/libs/jquery-3.2.1.min.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/pandyle.min.js" th:src="'/assets/libs/pandyle.min.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/layui/layui.js" th:src="'/assets/libs/layui/layui.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/toast/js/toast.js" th:src="'/assets/libs/toast/js/toast.js?'+${cacheKey}"></script>




<script th:inline="javascript">
    var LAYUI_TABLE_WIDTH_CONFIG = [];
    var TENANT_ID = [[${tenantId}]] ;
</script>

<script th:src="'/business/ops/db_info/db_backup_report_list.js?'+${cacheKey}"></script>
<script th:src="'/business/ops/db_info/db_backup_report_ext.js?'+${cacheKey}"></script>
</body>
</html>
